<template>
    <div>
        <vl-tree ref="tree" :props="deprops" :data="tree" />
    </div>
</template>
<script>
    export default {
        data() {
            return {
                tree: [],
                deprops: { // 默认配置
                    value: 'id', // treeId 为节点id，唯一值
                    label: 'name',
                    children: 'children',
                },
            }
        },
        created() {
            // this.tree = this.createData(4, 30, 40)

            this.tree=[{"id":-100,"name":"默认","children":[{"deviceCode":null,"jobNumber":"001","idCard":null,"nfcCode":null,"password":null,"name":"林亮1","personnelCode":"9ec1af6f4b9a4791ad8c3a91ca2c473b","sex":0,"telephone":null,"registrationTime":"2023/11/01 16:34:00","imagePath":"C:\\Users\\Administrator\\AppData\\Local\\maxvisionProducts\\accesscontrol\\BiodataInfos\\21082b23-793a-4a57-b736-22aee927582e","passwordIdentityId":"903bcc44-e9af-4f26-be62-6891f2e0cbc3","nfcIdentityId":"f6d6a6d6-7ec4-4274-9662-507a50a7bb79","biodataInfos":{},"departmentName":"","departmentInfoId":null,"departmentInfo":null,"attendanceRecordInfos":[],"uploadTime":null,"updateTime":"2023/11/01 16:51:29","uploadPersonId":null,"applyDeviceIds":null,"id":"21082b23-793a-4a57-b736-22aee927582e"},{"deviceCode":null,"jobNumber":"002","idCard":null,"nfcCode":null,"password":null,"name":"林亮2","personnelCode":"ffc0fa01dbb04a8696a3bab4ca40752b","sex":1,"telephone":null,"registrationTime":"2023/11/01 16:34:00","imagePath":"C:\\Users\\Administrator\\AppData\\Local\\maxvisionProducts\\accesscontrol\\BiodataInfos\\7db45844-db1a-463e-857c-848336880f4d","passwordIdentityId":"826a10b7-d135-440b-9ba6-8e9e67cfa61f","nfcIdentityId":"58feb9d4-d240-4d9b-9fab-24f38a604668","biodataInfos":{},"departmentName":"","departmentInfoId":null,"departmentInfo":null,"attendanceRecordInfos":[],"uploadTime":null,"updateTime":"2023/11/01 16:51:29","uploadPersonId":null,"applyDeviceIds":null,"id":"7db45844-db1a-463e-857c-848336880f4d"},{"deviceCode":null,"jobNumber":"6055","idCard":null,"nfcCode":null,"password":null,"name":"林亮6055","personnelCode":"d92e3f8419a74747a67446ba37e40946","sex":1,"telephone":null,"registrationTime":"2023/11/01 16:51:18","imagePath":"C:\\Users\\Administrator\\AppData\\Local\\maxvisionProducts\\accesscontrol\\BiodataInfos\\00015e41-c4e6-48ee-8313-cfa27eb30101","passwordIdentityId":"81332d75-34a1-474d-a9b9-6c1e3968fd3a","nfcIdentityId":"99e4d08a-f4d8-4f2c-837b-2f716b1fabf8","biodataInfos":{},"departmentName":"","departmentInfoId":null,"departmentInfo":null,"attendanceRecordInfos":[],"uploadTime":null,"updateTime":"2023/11/01 16:51:29","uploadPersonId":null,"applyDeviceIds":null,"id":"00015e41-c4e6-48ee-8313-cfa27eb30101"}]}]

        },
        mounted() {
            console.log('mounted',this.tree)
        },
        methods: {
            getKey (prefix, id) {
                return `${prefix}-${id}`
            },
            createData (
                maxDeep,
                maxChildren,
                minNodesNumber,
                deep = 1,
                key = 'node'
            ) {
                let id = 0
                return Array.from({ length: minNodesNumber })
                    .fill(deep)
                    .map(() => {
                        const childrenNumber =
                            deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren)
                        const nodeKey = this.getKey(key, ++id)
                        return {
                            id: nodeKey,
                            label: nodeKey,
                            children: childrenNumber
                                ? this.createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)
                                : undefined,
                        }
                    })
            }
        }
    }
</script>